<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    :close-on-click-modal="closeable"
    :close-on-press-escape="closeable"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :show-close="closeable"
    :title="state.dialogTitle"
    :width="width"
  >
    <el-form
      ref="formRef"
      label-width="85px"
      :model="state.formData"
      :rules="state.formRules"
    >
      <el-form-item label="新密码:" prop="password">
        <el-input
          v-model="state.formData.password"
          :maxlength="16"
          :show-word-limit="true"
          type="text"
        />
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPassword">
        <el-input
          v-model="state.formData.confirmPassword"
          :maxlength="16"
          :show-word-limit="true"
          type="text"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        v-if="closeable"
        icon="circle-close"
        type="warning"
        @click="close"
      >
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="UserRestPwd">
import { useMessage } from "@/hooks/message";
import { updateResetPassword } from "@/api/admin/org/sysuser/";
import { validPassword } from "@/utils/rules";

const props = defineProps({
  title: {
    type: String,
    default: "重置密码"
  },
  width: {
    type: String,
    default: "20%"
  },
  model: {
    type: Boolean,
    default: true
  },
  closeable: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(["confirm"]);

const formRef = ref(null);

const state = reactive({
  dialogTitle: props.title,
  formData: {
    id: "",
    password: "",
    confirmPassword: ""
  },
  formRules: {
    password: [
      { required: true, trigger: "blur", message: "新密码不能为空" },
      {
        validator: validPassword,
        trigger: "blur"
      }
    ],
    confirmPassword: [
      { required: true, trigger: "blur", message: "确认密码不能为空" },
      {
        validator: function (rule, value, callback) {
          if (value != state.formData.password) {
            return callback(new Error("两次密码不一致"));
          } else {
            callback();
          }
        },
        trigger: "change"
      }
    ]
  },
  dialogVisible: false
});

const show = row => {
  if (row) {
    state.formData.id = row.id;
    state.dialogVisible = true;
  }
};
const close = () => {
  formRef.value.resetFields();
  state.form = {
    id: "",
    password: "",
    confirmPassword: ""
  };
  state.dialogVisible = false;
};

const save = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      const { code, msg } = await updateResetPassword(state.formData);
      if (code === 200) {
        useMessage().success(msg);
      } else {
        useMessage().error(msg);
      }
      emits("confirm", {});
      close();
    }
  });
};

defineExpose({
  show,
  close,
  save
});
</script>
<style lang="scss" scoped>
.el-input__inner {
  width: 240px;
}
</style>
